Форум

makissm21 · #1 (**permalink**) 05.07.2013, 01:02

Здравствуйте, прошу прощения если не туда написал. Я сейчас делаю сайт на котором хочу сделать меню в котором пункты, должны принимать class="active" при скролле на определенную часть страницы, вот пример http://www.maddim.com/demos/spark-r9/#home а вот и код но он почему то не срабатывает, подскажите пожалуйста.
<script type="text/javascript">
// Cache selectors
var topMenu = $("#frontpagemain-menu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});

// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;

// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
});?
</script>

danik.js · #2 (**permalink**) 05.07.2013, 22:44

Селекторы свои проставили? В консоли браузера ошибок нет? Навтыкайте console.log(интересующая_переме� �ная) и смотрите вывод в консоль.

Alim · #3 (**permalink**) 05.07.2013, 23:41

Так подойдёт?

http://learn.javascript.ru/play/vvNc0b

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="admin" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<title>Untitled - 1</title>
    <style>
    body{
        margin: 0;
        padding: 90px 0 0 0;
    }
    .div{
        border: 4px solid #000;
        height: 700px;
        width: 1000px;
        margin: 20px auto;
    }
    #menu{
        background-color: #000;
        width: 100%;
        position: fixed;
        height: 80px;
        border: 1px solid #000;
        top: 0;
        color: #fff;
    }
    #menu td{
        float: left;
        border: 1px solid #fff;
        height: 30px;
        width: 200px;
        text-align: center;
    }
    #menu table{
        margin: 0 auto;
        list-style: none;
    }
    .stick_r{
        background: #000;
    }
    .active{
        background: red;
    }
    #footer{
        height: 500px;
        width: 100%;
        background: green;
    }
    </style>
    <script>
jQuery(function ($) {
    $(window).scroll(function(){
        $(".div").each(function () {
          var window_top = $(window).scrollTop();
          var div_top = $(this).offset().top;
          var div_1 = $(this).attr('id');
            if (window_top > div_top - 120){
                $('#menu').find('td').removeClass('active');
                $('#menu').find('td[class="'+div_1+'"]').addClass('active');
            }
            else{
                $('#menu').find('td[class="'+div_1+'"]').removeClass('active');
                };
        });
	});
});
</script>
</head>

<body>
<div id="menu">
<table>
<tr>
	<td class="1_div active">1111</td>
	<td class="2_div">2222</td>
	<td class="3_div">3333</td>
	<td class="4_div">4444</td>
</tr>
</table>
</div>
<div id="1_div" class="div"></div>
<div id="2_div" class="div"></div>
<div id="3_div" class="div"></div>
<div id="4_div" class="div"></div>
<div id="footer"></div>
</body>
</html>

привяжешь всё к animate

p.s ты мне должен 30 мин жизни

makissm21 · #4 (**permalink**) 06.07.2013, 18:22

Большое вам спасибо за вашу помощь, я уже сделал, вот рабочий код.
$(document).ready(function() {

//Bootstraping variable
headerWrapper = parseInt($('#gk-top').height());
offsetTolerance = 40;
pointer = $('.pointer');
firstNav = $('.menu a:first').parent('li');
defaultPointer = firstNav.offset().left;

//Move pointer to the first menu
pointer.css('left', defaultPointer);
firstNav.addClass('selected');

//Detecting user's scroll
$(window).scroll(function() {

//Check scroll position
scrollPosition = parseInt($(this).scrollTop());

//Move trough each menu and check its position with scroll position then move the pointer
$('.menu a').each(function() {

thisHref = $(this).attr('href');
thisTruePosition = parseInt($(thisHref).offset().top);
thisPosition = thisTruePosition - headerWrapper - offsetTolerance;
thisNav = $('.menu a[href='+ thisHref +']').parent('li');
currentPosition = parseInt(thisNav.offset().left);

if(scrollPosition >= thisPosition) {

$('.selected').removeClass('selected');
pointer.stop().animate({'left': currentPosition});
thisNav.addClass('selected');
}

});

//If we're at the bottom of the page, move pointer to the last section
bottomPage = parseInt($(document).height()) - parseInt($(window).height());
lastNav = $('.menu a:last').parent('li');
currentPosition = lastNav.offset().left;

if(scrollPosition == bottomPage || scrollPosition >= bottomPage) {

$('.selected').removeClass('selected');
pointer.stop().animate({'left': currentPosition});
lastNav.addClass('selected');
}

});

});

У меня теперь другая проблема, как переделать код, что бы при скроле менялась ссылка в строке браузера как вот здесь http://www.coffeemilk.ru/#agency, и еще как можно заставить активную кнопку так же как здесь http://elemisdesign.com/demos/menu/ плавно ездить?

Alim · #5 (**permalink**) 06.07.2013, 19:03

Цитата:

У меня теперь другая проблема, как переделать код, что бы при скроле менялась ссылка в строке браузера как вот здесь http://www.coffeemilk.ru/#agency, и еще как можно заставить активную кнопку так же как здесь http://elemisdesign.com/demos/menu/ плавно ездить?

http://www.coffeemilk.ru/#agency - лучше это дело не делать так ка страница при прокрутке посекундно обновляется а это нехорошо

http://elemisdesign.com/demos/menu/ - в чем проблема? Скачай страницу и сначала убери ненужный html а потом убирай стили и тогда когда останется чисто код, немного css и html можешь переносить на свой сайт

makissm21 · #6 (**permalink**) 06.07.2013, 19:11

А почему не хорошо?
Я уже пробовал так сделать, весь сайт поехал, видимо скрипты между собой конфликтуют. Думал что можно как то этот скрипт дополнить.

Alim · #7 (**permalink**) 06.07.2013, 19:37

на том сайте дело так: он как-то вставляет якори в url И при этом успевает прокрутится до места якоря это не нормально лучше от этой идеи отказаться

makissm21 · #8 (**permalink**) 06.07.2013, 20:19

а если не отказываться, вы не могли бы подсказать как это сделать?

Alim · #9 (**permalink**) 06.07.2013, 21:14

Увы я пытался, но я javascript не знаю а в jquery не знаю как всё это устроить. Покопайся в head-е сайта

makissm21 · #10 (**permalink**) 06.07.2013, 21:36

У них есть вот такой файлик js может это он отвечает за это?

function Menu(){
this.buttons = new Array("agency_btn","news_btn","cases_btn","contact s_btn");
this.conts = new Array("agency","news","cases","contacts");
this.scrollTime = 1000;
this.scrollEasing = "easeOutExpo";
this.scrolling = false;
this.sliding = false;

this.adapt = true;

this.init = function(){
ttt = this;
for(i=0;i<this.buttons.length;i++){
$("#"+this.buttons[i]).click(function(){
ttt.goTo(this);
return false;
});
}

$(window).bind("scroll",function(){
if (!ttt.scrolling && ttt.adapt){
ttt.onScroll();
}

});

$(document).bind("load",function(){
if(ttt.adapt) {
ttt.onScroll();
}

});

if($(window).width()<1099){
this.adapt = false;
} else {
this.initToTop();
}
};

this.goTo = function(elem){
if(!this.sliding){
this.sliding = true;
ttt = this;
$(".main_menu .main_menu_a").removeClass("main_menu_active");
$(elem).addClass("main_menu_active");
dest = $(elem).children("a").attr("href");
vert = $(dest).offset().top;

$("body").scrollTo(dest,ttt.scrollTime,{offset: {left:0,top:-40},onAfter:function(){
ttt.sliding = false;
}});

history.pushState(null,null,dest);
document.title = $(elem).children("a").attr("title")+" — Креативное digital агентство «CoffeeMilk Interactive» / Креативное агентство / Digital агентство / Интерактивное агентство";
}
};

this.initToTop = function(){
ttt = this;
$(".go_to_main").click(function(){
if(!ttt.sliding){
$(".main_menu .main_menu_active").removeClass("main_menu_active" );
history.replaceState(null,null," ");
ttt.sliding = true;
history.replaceState(null,null," ");
document.title = "Креативное digital агентство «CoffeeMilk Interactive» / Креативное агентство / Digital агентство / Интерактивное агентство";
$("body").scrollTo(0,ttt.scrollTime,{onAfter:funct ion(){
ttt.sliding = false;
}});
}
});

if($(window).scrollTop() > 500){
$(".go_to_main").fadeTo(100,1);
} else {
$(".go_to_main").fadeTo(100,0);
}

$(window).scroll(function(){
if($(window).scrollTop() > 500){
$(".go_to_main").stop();
$(".go_to_main").fadeTo(100,1);
} else {
$(".go_to_main").stop();
$(".go_to_main").fadeTo(100,0);
}
});
};

this.onScroll = function(){
if(!this.sliding){
wst = $(window).scrollTop();

$(".main_menu .main_menu_active").removeClass("main_menu_active" );

wst += 40;

if (wst >= $("#cases").offset().top+300) {
$("#contacts_btn").addClass("main_menu_active");
document.title = "Контакты — Креативное digital агентство «CoffeeMilk Interactive» / Креативное агентство / Digital агентство / Интерактивное агентство";
history.replaceState(null,null,"#contacts");
} else {
if (wst >= $("#cases").offset().top) {
$("#cases_btn").addClass("main_menu_active");
document.title = "Кейсы — Креативное digital агентство «CoffeeMilk Interactive» / Креативное агентство / Digital агентство / Интерактивное агентство";
history.replaceState(null,null,"#cases");
} else {
if (wst >= $("#news").offset().top) {
$("#news_btn").addClass("main_menu_active");
document.title = "Новости — Креативное digital агентство «CoffeeMilk Interactive» / Креативное агентство / Digital агентство / Интерактивное агентство";
history.replaceState(null,null,"#news");
} else {
if (wst >= $("#agency").offset().top) {
$("#agency_btn").addClass("main_menu_active");
document.title = "Агентство — Креативное digital агентство «CoffeeMilk Interactive» / Креативное агентство / Digital агентство / Интерактивное агентство";
history.replaceState(null,null,"#agency");
} else {
document.title = "Креативное digital агентство «CoffeeMilk Interactive» / Креативное агентство / Digital агентство / Интерактивное агентство";
history.replaceState(null,null," ");
}
}
}
}

}
}

Форум

Справочник

Discord чат

Курсы javascript